<template>
	<view>
		<view style="width:100%; text-align: center;">
			<view class="uni-form-item uni-column">
				<input class="uni-input" name="key" v-model="form.key" @input="textChange"
					placeholder="昵称或者八字" />
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker @change="riganChange" :value="index" :range="dayGans">
							<view class="uni-input">{{form.dayGan}}</view>
						</picker>
					</view>
          <view class="uni-list-cell-db">
            <picker @change="yuelingChange" :value="index" :range="yueLings">
              <view class="uni-input">{{form.yueLing}}</view>
            </picker>
          </view>
          <view class="uni-list-cell-db">
            <picker @change="shichenChange" :value="index" :range="shiChens">
              <view class="uni-input">{{form.timeZhi}}</view>
            </picker>
          </view>
				</view>
			</view>
<!--			<view class="uni-list">-->
<!--				<view class="uni-list-cell">-->
<!--&lt;!&ndash;					<view class="uni-list-cell-left">&ndash;&gt;-->
<!--&lt;!&ndash;						选择月令&ndash;&gt;-->
<!--&lt;!&ndash;					</view>&ndash;&gt;-->
<!--					<view class="uni-list-cell-db">-->
<!--						<picker @change="yuelingChange" :value="index" :range="yueLings">-->
<!--							<view class="uni-input">{{form.yueLing}}</view>-->
<!--						</picker>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="uni-list">-->
<!--				<view class="uni-list-cell">-->
<!--					<view class="uni-list-cell-left">-->
<!--						选择时辰-->
<!--					</view>-->
<!--					<view class="uni-list-cell-db">-->
<!--						<picker @change="shichenChange" :value="index" :range="shiChens">-->
<!--							<view class="uni-input">{{form.timeZhi}}</view>-->
<!--						</picker>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
			<view class="uni-btn-v">
			</view>
			<uni-list :border="true" style="text-align: left;">
				<uni-list-chat clickable v-for="(item, index) in this.data.mp.records" :key="item.id" :avatar-circle="true" :title="item.name"
					avatar="/static/logo.jpg" :note="item.bazi" :time="formattedCreateTime(item.createTime)" @click="showDrawer(index)">
				</uni-list-chat>
			</uni-list>
			<uni-drawer ref="showRight" mode="left" :width="320" :mask-click="true">
				<uni-section class="mb-10" title="经历详情" @click="myCopy()"></uni-section>
				<scroll-view style="height: 80%;" scroll-y="true">
					<view style="text-align: left;font-size: 24px">{{content}}</view>
				</scroll-view>
			</uni-drawer>
			<uni-pagination :total="data.mp.total" title="标题文字" :current="current" @change="changePage" />
			<view>
			</view>
      <text class="example-info">当前页：{{ data.mp.current }}，数据总量：{{ data.mp.total }}条，每页数据：{{ data.mp.size }}</text>
      <view style="height: 5px;">
			</view>
			<a style="text-decoration:none" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2023036300号-1 </a>

			<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
		</view>
		<view class="uni-btn-v">
			<button form-type="submit" type="primary" @click="toHome()">回首页</button>
			<button type="simple" @click="draw">抽奖</button>

		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	import { parseISO, format } from 'date-fns';

	import {
		ref,
		onMounted
	} from 'vue';

	export default {
		created() {
		    // 在组件创建时加载数据
			this.search();
		},
    mounted() {
      // 在组件创建时加载数据
      this.search();
    },
		data() {
			return {
				"index": 0,
				"dayGans": ["不选日干", "甲日干", "乙日干", "丙日干", "丁日干", "戊日干", "己日干", "庚日干", "辛日干", "壬日干", "癸日干"],
				"yueLings": ["不选月令", "子月", "丑月", "寅月", "卯月", "辰月", "巳月", "午月", "未月", "申月", "酉月", "戌月", "亥月"],
				"shiChens": ["不选时辰", "子时", "丑时", "寅时", "卯时", "辰时", "巳时", "午时", "未时", "申时", "酉时", "戌时", "亥时"],
				form: {
					"key": "",
					"dayGan": "选择日干",
					"yueLing": "选择月令",
					"timeZhi": "选择时辰",
					pageNo: 1,
					pageSize: 5
				},
				content:"",
        bz: "",
				current: 1,
				pageSize: 5,
				total: 50,
				data: {
					"mp": {
						"records": [],
						"total": 0,
						"size": 5,
						"current": 1,
						"orders": [],
						"optimizeCountSql": true,
						"searchCount": true
					},
					"members": []
				}
			}
		},
		methods: {
			textChange: function(e) {
				this.search();
			},
			toHome: function(e) {
				this.$router.push({
					path: '/'
				});
			},
			formattedCreateTime(createTime) {
			      const date = parseISO(createTime);
			      
			      const formattedDate = format(date, 'MM-dd');
			      const formattedHour = String(date.getHours()).padStart(2, '0') + '点';
			 
			      // 最后组合成你需要的格式
			      return `${formattedDate} ${formattedHour}`;
			},
			draw: function(e) {
				window.location.href='http://zhixiaoyixue.com:81/draw.html';

			},
			riganChange: function(e) {
				this.form.dayGan = this.dayGans[e.detail.value];
				this.search();
			},
			yuelingChange: function(e) {
				this.form.yueLing = this.yueLings[e.detail.value];
				this.search();
			},
			shichenChange: function(e) {
				this.form.timeZhi = this.shiChens[e.detail.value];
				this.search();
			},
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
      myCopy() {
        uni.setClipboardData({
          data: this.content,
          success: function () {
            console.log('复制成功');
            // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: function () {
            console.log('复制失败');
            // 可以添加错误处理或用户友好的提示
          }
        });
      },
      replaceAll(string, search, replace) {
          return string.split(search).join(replace);
      },
			showDrawer: function(index) {
				let record = this.data.mp.records[index];
				this.content = record.no;
        let t = record.taiYangTime;
        t = t.substring(0, 16)
        // this.bz = this.replaceAll(record.bz, " ", "")
        uni.setClipboardData({
          data: t,
          success: function () {
            console.log('复制八字成功');
            // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
            uni.showToast({
              title: '复制八字成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: function () {
            console.log('复制失败');
            // 可以添加错误处理或用户友好的提示
          }
        });
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			search: async function(e) {
				console.log(JSON.stringify(this.form))

				const fetchData = async () => {
					try {
						console.log("send request...2");
						const response = await axios.get('https://zhixiaoyixue.com:86/list', {
						  params: this.form
						});

						console.log(response.data);
						this.data = response.data;
					} catch (error) {
						console.error('Fetch error:', error);
					}
				};

				console.log("send request...1");
				try {
					await fetchData();
				} catch (err) {
				}
			},
			changePage: function(e) {
				this.current = e.current;
				this.form.pageNo = e.current;
				
				this.search();
			}
		}
	}
</script>

<style>

</style>